<template>
  <!-- H5端 -->
  <!-- #ifndef APP-PLUS -->
  <post-nav-bar title="智能厨房"></post-nav-bar>
  <web-view style="width: 100%; height: 100%;" :src="mapView.webUrl"></web-view>
  <!-- #endif -->

  <!-- App端 -->
  <!-- #ifdef APP-PLUS -->
  <post-nav-bar title="智能厨房"></post-nav-bar>
  <web-view :fullscreen="false" :src="mapView.webUrl"></web-view>
  <!-- #endif -->
</template>

<script setup>
import { reactive, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

// 地图地址
const mapView = reactive({
  webUrl: '/static/html/map.html',
});

// 获取并处理标记数据
const getStationData = (lng, lat) => {
  const stationMarkersData = [
    { longitude: 113.339688, latitude: 23.16154 },
    { longitude: 113.196217, latitude: 23.070792 },
    { longitude: 113.327379, latitude: 23.145002 },
    { longitude: 113.264431, latitude: 23.056863 },
    { longitude: 113.385708, latitude: 23.171367 },
  ];

  // 添加图标路径和ID
  const formattedData = stationMarkersData.map((item, index) => ({
    ...item,
    id: index,
    iconPath: '../../static/stationAddress.png',
  }));

  const encodedData = encodeURIComponent(JSON.stringify(formattedData));
  const timestamp = new Date().getTime();

  mapView.webUrl = `/static/html/gMap.html?lng=${lng}&lat=${lat}&stationData=${encodedData}&t=${timestamp}`;
};

onLoad(() => {
  // H5端无法使用uni定位，传入固定的坐标
  // #ifndef APP-PLUS
  //getStationData(113.335184, 23.126187);
  // #endif

  // App端使用uni.getLocation获取定位
  // #ifdef APP-PLUS
  uni.getLocation({
    type: 'gcj02', // 坐标类型，默认为wgs84，可选的值为gcj02和bd09ll
    success: res => {
      //getStationData(res.longitude, res.latitude); // 调用uni API获取定位
    },
    fail: err => {
      console.error('获取位置失败:', err);
    },
  });
  // #endif
});
</script>

<style scoped>
/* 如果需要添加样式，请在此处定义 */
</style>